.container {
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    background-image: url(common/images/backcolor.png);
    background-size: 150%;
    background-repeat: no-repeat;
    padding: 0 16px;
    background-position:50% 0;
}

.title {/*    justify-content: center;*/
    text-align: center;
    width: 100%;
    height: 100px;
    font-size: 40px;
    color: #000000;
    opacity: 0.9;
    border-bottom: 1px solid #ccc;
    font-family: HYQiHei-65S;

}

.Box {
    flex-direction: column;
    width: 100%;
    height: 500px;
    margin-top: 10px;
}

.Box text {
    margin-bottom: 10px;
}

.greatCircle {
/*    position: relative;*/
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: 300px;
/*    margin-top: 10px;*/
    background-color: tomato;
}

/*.triangle {*/
/*    position: absolute;*/
/*    top: 3px;*/
/*    left: 140px;*/
/*    width: 50px;*/
/*    height: 80px;*/
/*    border-width: 50px;*/
/*    border-style: solid;*/
/*    border-color: red transparent transparent transparent;!*    width: 20px;*!*/
/*!*    height: 20px;*!*/
/*!*    border: 100px solid #000000;*!*/
/*!*    border-left-color: green;*!*/
/*!*    border-top-color: yellow;*!*/
/*!*    border-right-color: tomato;*!*/
/*!*    border-bottom-color: blue;*!*/
/*}*/
/*.ImgColor{*/
/*    */
/*!*    position: absolute;*!*/
/*   */
/*!*    overflow: hidden ;*!*/
/*!*    transform: scale(5);*!*/
/*!*    width: 300px;*!*/
/*!*    height: 290px;*!*/
/*!*    background-color: red;*!*/
/*    border-radius: 200px;*/
/*    background-image: url("common/images/color.png");*/
/*    background-size: 100%;*/
/*    background-repeat: no-repeat;*/
/*!*    background-position: center center;*!*/
/*!*    margin-top: 30px;*!*/
/*    animation: rotate 1s linear infinite;*/
/*}*/
.smallCircle {/*    position: absolute;*/
/*    top:0;*/
/*    left:0;*/
/*    transform: translate(-50%,-50%);*/
    width: 310px;
    height: 310px;
    background-color: #b7b7b7;
    border: #000000;
    border-width: 1px;
    border-radius: 170px;
/*    animation: rotate 5s linear infinite;*/
}

.sector {
    position: absolute;
    top:-1%;
    left: 40%;
    width: 150px;
    height: 300px;
/*    margin: 100px;*/
    border-radius: 0px 100px 0px 100px;
    overflow: hidden;
    transform: rotate(-5deg);
/*    background-color: red;*/
}
.sectorTow{
    top: 15%;
    left: 36%;
    transform: rotate(55deg);
}
.sectorThree{
    top: 18%;
    left: 19%;
    transform: rotate(112deg);
}
.sectorfour{
    top: 5%;
    left: 8%;
    transform: rotate(170deg);
}
.sectorfive{
    top: -9%;
    left: 17%;
    transform: rotate(235deg);
}
.sectorsix{
    top: -11%;
    left: 30%;
    transform: rotate(295deg);
}
.sector-inner {/*    position: absolute;*/
    text-align: center;
/*    display: block;*/
    width: 140px;
    padding: 5px 3px 0 57px;
    height: 300px;
    background-color: green;
    transform: translate(-90px,-50px) rotate(45deg);
/*    transform-origin: right center;*/
    border-radius: 100px 0 100px 0px;

}
.colorTow{
    background-color: blue;
}
.colorThree{
    background-color: yellow;
}
.colorfour{
    background-color: #aa2116;
}
.colorfive{
    background-color: #411445;
}
.colorsix{
    background-color: #f15a22;
}

/*.sector-inner text {!*    display: block;*!*/
/*    font-size: 20px;*/
/*!*    transform-origin: center;*!*/
/*    transform-origin: 300% 100%;*/
/*    transform: rotate(-18deg);*/
/*    color: #d46854;*/
/*!*    background-color: tomato;*!*/
/*}*/
/*.circle{*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%,-50%);*/
/*    width: 100px;*/
/*    height: 100px;*/
/*    border-radius: 50px;*/
/*    background-color: #000;*/
/*}*/
@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes rendercolor {
    0% {/*        transform: rotate(0deg);*/
        background-color: #2e3a1f;
    }

    25% {
        background-color: #f58220;
    }

    50% {
        background-color: #d93a49;
    }

    75% {
        background-color: #7fb80e;
    }

    100% {
        background-color: #6f60aa;
    }


}
/*.h1{*/
/*    font-size: 40px;*/
/*}*/
/*.h2{*/
/*    font-size: 35px;*/
/*}*/
/*.h3{*/
/*    font-size: 30px;*/
/*}*/
/*.h4{*/
/*    font-size: 25px;*/
/*}*/
/*.h5{*/
/*    font-size: 20px;*/
/*}*/
/*.h6{*/
/*    font-size: 18px;*/
/*}*/

.award {
/*    margin-top: 20px;*/
    font-size: 20px;
}

.awardRight {
    margin-left: 40px;
}

.click {
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    height: 70px;
}

.but {
    width: 70%;
    height: 100%;
    font-size: 30px;/*    margin: 50%;*/
}

.butClear {
    width: 20%;
    height: 10%;
    right: -4%;
    font-size: 20px;
    background-color: red;
    align-self: flex-end;
}

.prizewinning {/*    flex-direction: column;*/
    padding: 5px 20px;
    width: 100%;
    height: 30%;
    margin-top: 20px;
    margin-bottom: 10px;
    background-color: #FFFFFF;/*    box-shadow: 25px 25px 50px pink;*/
    border-radius: 10px;/*    position: relative;*/
    opacity: .7;
}

.showList {
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.show {
    position: absolute;
    bottom: 0;
    font-size: 20px;
}


.bodydom {
    width: 100%;
    height: 100%;
    border: 2px solid;
    display: flex;
    flex-wrap: wrap;
/*    background-color: #F56C6C;*/
    border-radius: 10px;
}

.block {
    width: 25%;
    height: 25%;
    border: 1px solid black;
    text-align: center;
    font-size: 16px;
    margin: 4%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: pink;
}
.whiteBlock {
    width: 25%;
    height: 25%;
    border: 1px solid black;
    text-align: center;
    font-size: 16px;
    margin: 4%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: white;
}
.block5 {

    background-color: #409EFF;
    cursor: pointer;
}
.block6{
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.frequency {
    font-size: 15px
}

.prize {
    font-size: 25px;
    margin-top: 10px;
}
@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}

@media screen and (device-type: wearable) {
    .title {
        font-size: 28px;
        color: #FFFFFF;
    }
}

@media screen and (device-type: tv) {
    .container {
        background-image: url("/common/images/Wallpaper.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .title {
        font-size: 100px;
        color: #FFFFFF;
    }
}

@media screen and (device-type: phone) and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}
